<template>
  <div class="data-card" :class="[type]">
    <div class="card-content">
      <div class="title">{{ title }}</div>
      <div class="value">{{ value }}</div>
      <div class="trend">
        <span class="icon">{{ trendIcon }}</span>
        <span>{{ trend }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: String,
  value: String,
  trend: String,
  type: {
    type: String,
    default: 'default'
  }
})

const trendIcon = computed(() => {
  if(props.trend?.startsWith('+')) return '↑'
  if(props.trend?.startsWith('-')) return '↓'
  return ''
})
</script>

<style lang="scss" scoped>
.data-card {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  .title {
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
  }

  .value {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
  }

  .trend {
    font-size: 12px;

    .icon {
      margin-right: 4px;
    }

    &.success {
      color: #67C23A;
    }
    &.warning {
      color: #E6A23C;
    }
    &.danger {
      color: #F56C6C;
    }
  }

  // 类型颜色
  &[class*="default"] .trend { color: #409EFF; }
  &[class*="warning"] .trend { color: #E6A23C; }
  &[class*="danger"] .trend { color: #F56C6C; }
}
</style>